<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>

    <link href="${path}/css/style.css" rel="stylesheet">

    <link href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="${path}/addon/bootstrapValidation/css/bootstrapValidator.css" rel="stylesheet">


    <script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="${path}/addon/bootstrapValidation/js/bootstrapValidator.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <title>Green|用户注册</title>
</head>

<body>
<%@ include file="header.jsp" %>
<div class="container">
    <form id="togglingForm" class="form-register form-horizontal" action="<c:url value="/register.html" />"
          method="post">

        <div class="form-group">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-lg-push-6 col-md-push-6 col-sm-push-6 col-xs-push-12">
                <h4>注册信息</h4>
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-3 col-md-3 col-sm-3 col-xs-12  control-label">用户名<sup>*</sup></label>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 ">
                <input type="text" class="form-control" name="userName" placeholder="用户名"
                       data-bv-message="用户名不符合要求"
                       required
                       data-bv-notempty-message="用户名不能为空"
                       pattern="[a-zA-Z0-9]+"
                       data-bv-regexp-message="用户名只能由字母和数字组成"
                />
            </div>
        </div>

        <div class="form-group">
            <label class="col-lg-3 col-md-3 col-sm-3 col-xs-12  control-label">密码<sup>*</sup></label>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 ">
                <input type="password" class="form-control" name="password" placeholder="密码"
                       data-bv-message="密码不符合要求"
                       required
                       data-bv-notempty-message="密码不能为空"
                       pattern="[a-zA-Z0-9]+"
                       data-bv-regexp-message="密码只能由字母和数字组成"
                       data-bv-different="true"
                       data-bv-different-field="userName"
                       data-bv-different-message="为了安全，密码请不要和用户名一样"/>
            </div>
        </div>

        <div class="form-group">
            <label class="col-lg-3 col-md-3 col-sm-3 col-xs-12  control-label">确认密码<sup>*</sup></label>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 ">
                <input type="password" class="form-control" name="again" placeholder="确认密码"
                       data-bv-message="密码不符合要求"
                       required
                       data-bv-notempty-message="密码不能为空"
                       pattern="[a-zA-Z0-9]+"
                       data-bv-regexp-message="密码只能由字母和数字组成"
                       data-bv-identical="true"
                       data-bv-identical-field="password"
                       data-bv-identical-message="两次密码输入不一致"

                       data-bv-different="true"
                       data-bv-different-field="userName"
                       data-bv-different-message="为了安全，密码请不要和用户名一样"/>

            </div>
        </div>

        <div class="form-group col-lg-push-3 col-md-push-3 col-sm-push-3 col-lg-8 col-md-8 col-sm-8 col-xs-12">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 ">
                <button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <button class="btn btn-lg btn-primary btn-block" type="button">忘记密码</button>
            </div>
        </div>
    </form>
    <script>
        $(document).ready(function () {
            $('#togglingForm')
                    .bootstrapValidator({
                        message: 'This value is not valid',
                        feedbackIcons: {
                            valid: 'glyphicon glyphicon-ok',
                            invalid: 'glyphicon glyphicon-remove',
                            validating: 'glyphicon glyphicon-refresh'
                        }
                    });
        });

    </script>

</div>
</body>
</html>
